<template>
  <el-container>
    <el-header class="lich-header">
      <Navbar v-bind:user="user" v-bind:page_type="page_type"/>
    </el-header>
    <el-main>
      <el-row :gutter="5">
        <el-col :xl="{span: 16, offset: 4}" :lg="{span: 18, offset: 3}" :md="{span: 20, offset: 2}"
                :sm="{span: 22, offset: 1}"
                :xa="{span: 24, offset: 0}" v-for="(o) in items" :key="o.title" style="margin-bottom: 20px;">
          <el-card>
            <div style="float: left; padding: 14px;">
              <el-link :href="o.url" :underline="false" target="view_window">
                <h1 class="arc-title">{{ o.title }}</h1>
                <span class="tag"
                      :class="{red: o.tag === '利好', green: o.tag === '利空', m: o.tag === '中性'}">{{ o.tag }}</span>
                <br/>
                <span>{{ o.content }}</span>
              </el-link>
            </div>
          </el-card>
        </el-col>
        <el-col :xl="{span: 16, offset: 4}" :lg="{span: 18, offset: 3}" :md="{span: 20, offset: 2}"
                :sm="{span: 22, offset: 1}"
                :xs="{span: 24, offset: 0}" style="text-align: center">
          <el-pagination
            style="margin: 0 auto"
            :current-page="page"
            :page-size="1"
            :pager-count="5"
            layout="prev, pager, next"
            :total="pages"
            @current-change="change"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
  import Navbar from '~/components/Navbar.vue'
  let _c = require('~/assets/config');

  export default {
    components: {
      Navbar
    },
    async asyncData({req, $axios}) {
      let opt = {};
      let _h = _c.API_HOST;
      if (process.server) {
        opt.headers = {
          "Cookie": req.headers.cookie + ";"
        };
      } else {
        $axios.defaults.withCredentials = true;
      }
      let {data, user} = await $axios.$get(`${_h}/api/page/`, opt);
      let u;
      if (user === null || user === undefined) {
        u = {
          isLogin: false
        }
      } else {
        u = {
          isLogin: true,
          isAdmin: user.is_admin,
          userName: user.name,
          userId: user.id
        }
      }
      let _p = {
        _a: false,
        _b: true
      };
      return {
        items: data.items, page: data.page, pages: data.pages, user: u, page_type: _p
      }
    },
    methods: {
      change: function (p) {
        this.$router.push({path: `/${p}`});
      }
    }
  }
</script>

<style>
  .button--green {
    display: inline-block;
    border-radius: 4px;
    border: 1px solid #3b8070;
    color: #3b8070;
    text-decoration: none;
    padding: 10px 30px;
  }

  .button--green:hover {
    color: #fff;
    background-color: #3b8070;
  }

  .button--grey {
    display: inline-block;
    border-radius: 4px;
    border: 1px solid #35495e;
    color: #35495e;
    text-decoration: none;
    padding: 10px 30px;
    margin-left: 15px;
  }

  .button--grey:hover {
    color: #fff;
    background-color: #35495e;
  }

  .lich-header {
    text-align: right;
  }

  .arc-title {
    display: block;
    margin-bottom: 0;
    color: #000;
    font-size: 18px;
  }

  .tag {
    font-size: 14px;
  }

  .red {
    color: #d7211b;
  }

  .green {
    color: #4f911b;
  }

  .m {
    color: #61619e;
  }
</style>
